<template>
	<view >
		<u-section style="padding: 0 30rpx;" :title="'序号' + (index + 1)" :right="false"></u-section>
		<u-form style="padding: 0 30rpx;">
			<u-form-item label-position="left" label="请选择品牌" :label-width="150" style="padding: 0;" :border-bottom="false">
				<u-input
					:value="brand && brand.label"
					@tap="showBrandPicker = true"
					:selectOpen="showBrandPicker"
					type="select"
					:border="true"
					inputAlign="right"
					placeholder="请选择品牌"
				></u-input>
			</u-form-item>
			<u-form-item label-position="left" label="代码及描述" :label-width="150" :border-bottom="false" style="padding-bottom: 0;">
				<u-input
					:value="product && product.label"
					@tap="showProductPicker = true"
					:selectOpen="showProductPicker"
					type="select"
					:border="true"
					inputAlign="right"
					placeholder="代码及描述"
				></u-input>
			</u-form-item>
			<view class="u-flex u-row-between">
				<u-form-item style="width: 15%; padding-bottom: 0;" label-position="top" label="库存" :border-bottom="false" label-align="center">
					<u-input
						:disabled="true"
						:value="productList[productPickerIndex] && productList[productPickerIndex].StockNumber"
						:height="60"
						:customStyle="customStyle"
						:border="false"
						inputAlign="center"
						placeholder="0"
					></u-input>
				</u-form-item>
				<u-form-item style="width: 20%; margin-left: 10rpx;padding-bottom: 0;" label-position="top" label="申请数量" :border-bottom="false">
					<u-input v-model="value.state.ApplyCount" :height="60" type="number" :customStyle="customStyle" placeholder="0" :border="true" inputAlign="center"></u-input>
				</u-form-item>
				<u-form-item style="width: 25%; margin-left: 10rpx;padding-bottom: 0;" label-position="top" label="折扣" :border-bottom="false" label-align="center">
					<u-input
						v-model.number="value.state.Discount"
						:customStyle="customStyle"
						:height="60"
						:border="true"
						placeholder="100"
						inputAlign="center"
					></u-input>
				</u-form-item>
				<u-form-item style="width: 20%; margin-left: 10rpx;padding-bottom: 0;" label-position="top" label="单价" :border-bottom="false" label-align="center">
					<u-input
						:disabled="true"
						:value="productList[productPickerIndex] && productList[productPickerIndex].Amount"
						:height="60"
						type="number"
						:customStyle="customStyle"
						placeholder="0"
						:border="false"
						inputAlign="center"
					></u-input>
				</u-form-item>
				<u-form-item style="width: 20%; margin-left: 10rpx;padding-bottom: 0;" label-position="top" label="金额小计" :border-bottom="false" label-align="center">
					<u-input
						:disabled="true"
						:value="productList[productPickerIndex] && productList[productPickerIndex].Amount * value.state.ApplyCount"
						:height="60"
						type="number"
						:customStyle="customStyle"
						placeholder="0"
						:border="false"
						inputAlign="center"
					></u-input>
				</u-form-item>
			</view>
			<u-form-item label-position="left" label="申请时间" :label-width="150" :border-bottom="false" style="padding: 0;">
				<u-input type="text" :disabled="true" :value="value.state.ApplyTime | date('yyyy-mm-dd hh:MM')"></u-input>
			</u-form-item>
			<u-form-item label-position="left" label="申请备注" :label-width="150" :border-bottom="false" style="padding: 0;">
				<u-input v-model="value.state.Remark" :border="true" inputAlign="right" placeholder="备注"></u-input>
			</u-form-item>

			<u-select :default-value="[brandPickerIndex]" @confirm="onBrancPickerChange" v-model="showBrandPicker" :list="brandList" value-name="Key" label-name="Value"></u-select>
			<u-select
				:default-value="[productPickerIndex]"
				@confirm="onProductPickerChange"
				v-model="showProductPicker"
				:list="productList"
				value-name="Key"
				label-name="Value"
			></u-select>
		</u-form>
		<u-gap :height="20" bg-color="#eaecef" :margin-top="10"></u-gap>
	</view>
</template>

<script>
export default {
	name: 'entity-prototype-apply',
	props: {
		index: {
			type: Number,
			default: 0
		},
		value: {
			type: Object,
			default() {
				state: {
					ApplyCount: 0;
				}
			}
		}
	},
	data() {
		return {
			customStyle: {
				height: '60rpx',
				lineHeight: '60rpx'
			},

			brandList: [],
			showBrandPicker: false,
			brandPickerIndex: -1,
			brand: {},

			productList: [],
			showProductPicker: false,
			productPickerIndex: -1,
			product: {}
		};
	},

	created() {
		this.getBrandList();
	},

	methods: {
		getBrandList() {
			this.$u.api
				.getBrandDic({
					SelectType: '3'
				})
				.then(res => {
					const { ResultCode, Entity_Pro_BrandList } = res;
					if (ResultCode === 1) {
						this.brandList = Entity_Pro_BrandList;
					}
				});
		},

		getProductList(brandId) {
			this.$u.api
				.getProductDic({
					SelectType: '3',
					BrandId: brandId
				})
				.then(res => {
					console.log(res);
					const { ResultCode, ProductList } = res;
					if (ResultCode === 1) {
						this.productList = ProductList;
					}
				});
		},

		onBrancPickerChange(e) {
			if (!e[0].value || !e[0].label) {
				if (this.brandList.length > 0) {
					this.brand = {
						label: this.brandList[0].Value,
						value: this.brandList[0].Key
					};
				} else {
					return false;
				}
			} else {
				this.brand = e[0];
			}
			this.brandPickerIndex = this.brandList.findIndex(item => item.Key == this.brand.value);

			this.value.state.BrandId = this.brand.value;

			this.getProductList(this.brand.value);
		},

		onProductPickerChange(e) {
			if (!e[0].value || !e[0].label) {
				if (this.productList.length > 0) {
					this.product = {
						label: this.productList[0].Value,
						value: this.productList[0].Key
					};
				} else {
					return false;
				}
			} else {
				this.product = e[0];
			}
			this.productPickerIndex = this.productList.findIndex(item => item.Key == this.product.value);

			this.value.state.ProductId = this.product.value;
		}
	}
};
</script>

<style lang="scss"></style>
